/* 全局容器 */
.container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 120rpx;
    /* 增加底部padding，确保内容不被tab栏遮挡 */
    padding-top: 201rpx;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #FFFFFF;
}

/* 顶部导航 - Header组件样式已统一，这里移除冲突样式 */

/* ========== Tab 栏（我接的单 / 我的发布） ========== */
.tab-bar {
    display: flex;
    align-items: center;
    height: 90rpx;
    background-color: #fff;
    border-bottom: 1px solid #f5f5f5;
    /* 核心调整：左对齐 + 左侧留白 */
    justify-content: flex-start;
    padding-left: 40rpx;
    /* 左侧留白，贴合设计图 */
}

.tab-item {
    font-size: 32rpx;
    color: #666;
    position: relative;
    margin-right: 60rpx;
    /* 两个Tab之间的间距 */
    padding-bottom: 12rpx;
    /* 给下划线预留空间 */
}

/* 激活态样式：文字变绿 + 底部下划线（居中于文字） */
.tab-item.active {
    color: #0aa573;
}

.tab-item.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    /* 下划线宽度 */
    height: 8rpx;
    /* 下划线高度 */
    background-color: #0aa573;
    border-radius: 4rpx;
}

/* ========== 筛选栏（全部 / 未读 / 已读） ========== */
.filter-bar {
    display: flex;
    align-items: center;
    height: 80rpx;
    background-color: #fff;
    border-bottom: 1px solid #f5f5f5;
    /* 核心调整：左对齐 + 左侧留白 */
    justify-content: flex-start;
    padding-left: 40rpx;
    /* 与Tab栏左侧留白呼应 */
}

.filter-item {
    font-size: 28rpx;
    color: #333;
    position: relative;
    margin-right: 40rpx;
    /* 筛选项之间的间距 */
}

/* 未读小红点（贴合文字右上角） */
.badge {
    position: absolute;
    top: -12rpx;
    /* 向上偏移 */
    right: -16rpx;
    /* 向右偏移（相对于筛选项） */
    background-color: red;
    color: #fff;
    font-size: 20rpx;
    width: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    border-radius: 50%;
}

/* 激活态文字变绿 */
.filter-item.active {
    color: #0aa573;
}

/* 列表卡片 */
.list {
    padding: 20rpx;
}

.list-item {
    background-color: #fff;
    border-radius: 24rpx;
    padding: 28rpx 0 28rpx 28rpx;
    /* 仅保留上、左、下内边距，右侧内边距设为0 */
    margin-bottom: 24rpx;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
}

/* 状态+标题同行 */
.status-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
}

.status-tag {
    width: 73rpx;
    height: 21rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 22rpx;
    color: #38AB00;
    padding: 6rpx 14rpx;
    border-radius: 8rpx;
    margin-right: 16rpx;
}

.item-title {
    margin-left: 15rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
}

.status-image {
    width: 33rpx;
    height: 32rpx;
}

/* 信息标签 */
.info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    margin-bottom: 16rpx;
}

.info-tag {
    background-color: #F5F5F5;
    color: #999;
    font-size: 24rpx;
    padding: 6rpx 14rpx;
    border-radius: 8rpx;

}

/* 技能标签 */
.skill-tag {
    background-color: #F5F5F5;
    color: #999;
    font-size: 24rpx;
    padding: 6rpx 14rpx;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    display: inline-block;
}

/* 雇主信息栏 */
.employer-bar {
    display: flex;
    flex-direction: column;
    /* 改为垂直排列 */
    width: 100%;
    padding: 10rpx 0;
}

/* 私聊区域容器 */
.private-chat-container {
    width: 100%;
    margin-bottom: 20rpx;
    /* 与群聊区域保持间距 */
}

/* 群聊区域容器 */
.group-chat-container {
    width: 100%;
    padding-top: 20rpx;
    border-top: 1px solid #f5f5f5;
    /* 添加上边框分隔 */
}

/* 移除按钮的绝对定位 */
.chat-btn {
    background: #BEFF32;
    color: #000;
    font-size: 24rpx;
    padding: 0rpx 24rpx;
    border-radius: 8rpx;
    min-width: 80rpx;
    height: 56rpx;
    width: 137rpx;
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    margin-right: 28rpx;
    /* 与右侧保持间距 */
    border: none;
    outline: none;
    box-shadow: none;
    line-height: 56rpx;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

/* 雇主项容器 */
.employer-item {
    display: flex;
    /* 新增：改为flex布局 */
    align-items: center;
    /* 垂直居中对齐 */
    width: 100%;
    /* 占满父容器宽度 */
}

.employer-avatar {
    width: 68rpx;
    height: 68rpx;
    border-radius: 50%;
}

.employer-info {
    flex: 1;
    /* 占据剩余空间 */
    margin-left: 16rpx;
    min-width: 0;
    /* 关键：允许内容在flex容器中收缩 */
}

.last-msg {
    font-size: 24rpx;
    color: #999;
    white-space: nowrap;
    /* 新增：防止文本换行 */
    overflow: hidden;
    /* 新增：超出部分隐藏 */
    text-overflow: ellipsis;
    /* 新增：显示省略号 */
}

.employer-name {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    margin-bottom: 4rpx;
}

.employer-tag {
    color: #fff;
    font-size: 20rpx;
    padding: 2rpx 8rpx;
    background: #FFF3EB;
    border-radius: 5rpx;
    margin-right: 6rpx;
}

.employer-tag-text {
    width: 42rpx;
    height: 21rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 22rpx;
    color: #F76F17;
}


.nickname {
    font-weight: bold;
    color: #333;
    margin-left: 16rpx;
    /* 新增：昵称字数省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200rpx;
    /* 根据设计需求调整宽度 */
}

.last-msg {
    font-size: 24rpx;
    color: #999;
    /* 新增：最后一条消息字数省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400rpx;
    /* 根据设计需求调整宽度 */
}

.unread-badge {
    background-color: red;
    color: #fff;
    font-size: 20rpx;
    width: 28rpx;
    height: 28rpx;
    line-height: 28rpx;
    text-align: center;
    border-radius: 50%;
    margin-left: 8rpx;
}

.last-msg {
    font-size: 24rpx;
    color: #999;
}


/* 加载提示 */
.load-more {
    text-align: center;
    padding: 30rpx;
    font-size: 26rpx;
    color: #999;
}

/* 空数据提示 */
.empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 200rpx 0;
    color: #999;
}

.empty-icon {
    font-size: 80rpx;
    margin-bottom: 20rpx;
}

.empty-text {
    font-size: 28rpx;
    color: #999;
}

.no-chat-person {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    width: 100%;
    background-color: #f9f9f9;
    border-radius: 16rpx;
    margin-top: 20rpx;
    margin-right: 26rpx;
}

.no-chat-icon {
    width: 60rpx;
    height: 60rpx;
    background-color: #e8f5ee;
    border-radius: 50%;
    margin-bottom: 20rpx;
    position: relative;
}

.no-chat-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30rpx;
    height: 2rpx;
    background-color: #0aa573;
}

.no-chat-text {
    font-size: 28rpx;
    color: #999;
    text-align: center;
}

/* 群聊样式 */
.group-chat-item {
    display: flex;
    padding: 16rpx 0;
    position: relative;
    width: 100%;
}

.group-avatars {
    position: relative;
    width: 120rpx;
    /* 增加宽度以适应水平堆叠 */
    height: 70rpx;
    /* 固定高度，与头像高度一致 */
    margin-right: 20rpx;
}

.group-avatar {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    /* 改为圆形头像 */
    border: 4rpx solid #fff;
    /* 增加边框宽度，更好地分隔头像 */
    position: absolute;
    top: 0;
    /* 统一顶部对齐 */
    object-fit: cover;
    /* 确保图片比例正确 */
}

.group-avatar:nth-child(1) {
    left: 0;
    z-index: 4;
}

.group-avatar:nth-child(2) {
    left: 30rpx;
    z-index: 3;
}

.group-avatar:nth-child(3) {
    left: 60rpx;
    z-index: 2;
}

.group-avatar:nth-child(4) {
    left: 90rpx;
    z-index: 1;
}

.more-avatar {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    /* 改为圆形 */
    border: 4rpx solid #fff;
    background-color: #f5f5f5;
    color: #666;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 90rpx;
    top: 0;
    z-index: 1;
}

// 添加未读消息徽章样式
.group-avatars .unread-badge {
    position: absolute;
    right: -5rpx;
    top: -5rpx;
    background-color: #ff4d4f;
    color: #fff;
    font-size: 20rpx;
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    border-radius: 50%;
    z-index: 5;
}

.group-info {
    flex: 1;
    overflow: hidden;
}

.group-name {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
}

.group-tag {
    background-color: #0aa573;
    color: #fff;
    padding: 4rpx 10rpx;
    border-radius: 6rpx;
    font-size: 20rpx;
    margin-right: 10rpx;
}

.group-tag-text {
    font-size: 20rpx;
}

.group-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}